import React, { useState } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import "./ProductList.less";
import homeData from "../../../state/homeData";
import { observer } from "mobx-react";

const ProductList = () => {
  const [current, setCurrent] = useState(0);
  const [selbar, setSelbar] = useState(87);

  const tabSwitch = index => {
    setCurrent(index);
    switch (index) {
      case 0:
        setSelbar(87);
        break;
      case 1:
        setSelbar(308);
        break;
      case 2:
        setSelbar(530);
        break;
      default:
        break;
    }
  };

  return (
    <View className="home-product-wrap">
      <View className="product-header h-container">
        <View onClick={() => tabSwitch(0)} className="header-item">
          <Text>综合</Text>
        </View>
        <View onClick={() => tabSwitch(1)} className="header-item">
          <Text>价格</Text>
        </View>
        <View onClick={() => tabSwitch(2)} className="header-item">
          <Text>销量</Text>
        </View>
        <View style={{ left: selbar + "rpx" }} className="product-sel-bar" />
      </View>
      <View
        style={{ display: current == 0 ? "block" : "none" }}
        index={0}
        className="product-pane"
      >
        <View className="product-group">
          {homeData.compList.map((item, index) => {
            return (
              <View className="product-item" key={item.id} index={item.id}>
                <Image mode="widthFix" src={item.image_url} />
                <View className="product-right">
                  <View className="product-title">
                    <Text>{item.name}</Text>
                  </View>
                  <View className="product-type">{item.goods_classify_id}</View>
                  <View className="product-price">￥{item.sell_price}</View>
                </View>
              </View>
            );
          })}
        </View>
      </View>
      <View
        style={{ display: current == 1 ? "block" : "none" }}
        index={1}
        className="product-pane"
      >
        <View className="product-group">
          {homeData.priceHight.map((item, index) => {
            return (
              <View className="product-item" key={item.id} index={item.id}>
                <Image mode="widthFix" src={item.image_url} />
                <View className="product-right">
                  <View className="product-title">
                    <Text>{item.name}</Text>
                  </View>
                  <View className="product-type">{item.goods_classify_id}</View>
                  <View className="product-price">￥{item.sell_price}</View>
                </View>
              </View>
            );
          })}
        </View>
      </View>
      <View
        style={{ display: current == 2 ? "block" : "none" }}
        index={2}
        className="product-pane"
      >
        <View className="product-group">
          {homeData.sellHight.map((item, index) => {
            return (
              <View className="product-item" key={item.id} index={item.id}>
                <Image mode="widthFix" src={item.image_url} />
                <View className="product-right">
                  <View className="product-title">
                    <Text>{item.name}</Text>
                  </View>
                  <View className="product-type">{item.goods_classify_id}</View>
                  <View className="product-price">￥{item.sell_price}</View>
                </View>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
};

export default observer(ProductList);
